<template>
	<view class="register_box">
		<view class="register_bg">
			<image src="@/static/login/loginBgc.png" mode=""></image>
		</view>
		<view class="login_box">
			<!-- <view class="title">
				<view class="" :style="{color:loginType?'':'#0066FF'}" @click="loginType=0">验证码登录</view>
				<view class="" :style="{color:loginType?'#0066FF':''}" @click="loginType=1">密码登录</view>
			</view> -->
			<view class="" v-if="loginType">
				<view class="login_input">
					<input type="text" v-model="mobile" maxlength="11" placeholder="请输入账号"
						placeholder-style="fontSize:22rpx">
				</view>
				<view class="login_input">
					<input type="text" v-model="password" placeholder="请输入密码" v-if="inputType"
						placeholder-style="fontSize:22rpx">
					<input type="password" v-model="password" placeholder="请输入密码" v-else
						placeholder-style="fontSize:22rpx">
					<view class="" style="margin: 0 20rpx;">
						<u-icon name="eye-fill" size="26" v-if="inputType" @click="inputType = !inputType"></u-icon>
						<u-icon name="eye-off" size="26" v-else @click="inputType = !inputType"></u-icon>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<view class="login_input">
					<input type="text" v-model="mobile" maxlength="11" placeholder="请输入手机号">
				</view>
				<view class="login_input">
					<input type="text" v-model="code" placeholder="请输入您的验证码">
					<view class="code" @click="getCode"> {{timeInterval? timeValue +'s重新获取':'获取验证码'}}</view>
				</view>
			</view>

			<view class="" style="display: flex;justify-content: flex-end;" v-if="loginType">
				<text @click="$fun.jump(`/pageA/public/find`)"
					style="z-index: 100;color: #fff;font-size: 24rpx;;margin-right: 20rpx;">
					忘记密码 ？
				</text>
			</view>
			<view class="agreement">
				<checkbox style="transform:scale(0.6)" @click="isCh=!isCh" :checked="isCh" />
				<text style="color: #606266;">我已阅读并同意
					<text @click="$fun.jump('/pageB/noticeList/noticeInfo?name=用户政策&type=16')"
						style="color: #FE555A;">用户政策</text>和
					<text @click="$fun.jump('/pageB/noticeList/noticeInfo?name=隐私政策&type=15')"
						style="color: #FE555A;">隐私政策</text>
				</text>
			</view>
			<view class="login_button" @click="toLogin()">
				立即登录
			</view>
			<view class="register" v-if="loginType" @click="$fun.jump(`/pageA/public/register`)">
				去注册
			</view>
		</view>
	</view>
</template>

<script>
	// import {
	// 	mapMutation
	// } from 'vuex';

	import loginVue from './login.vue'

	export default {
		data() {
			return {
				mobile: '',
				password: '',
				loginList: [],
				screenHeight: 0,
				isClick: false,
				configObj: {},
				isCh: false,
				loginType: 1,
				inputType: false,
				code: '',
				timeValue: 10,
				timeInterval: null
			}
		},
		onLoad(options) {
			if (options.adminMobile) {
				this.mobile = options.adminMobile
				this.password = options.adminPassword
			}
			var that = this
			uni.getSystemInfo({
				success(res) {
					console.info('系统信息...', res)
					that.screenHeight = res.windowHeight
					console.log(that.screenHeight)
				}
			})
			this.$fun.ajax.post('index/config', {}).then(res => {
				this.configObj = res.data
			})
		},
		methods: {
			// 获取验证码
			getCode() {
				if (this.timeInterval) return
				this.timeInterval = setInterval(() => {
					this.timeValue--
					if (this.timeValue <= 0) {
						clearInterval(this.timeInterval)
						this.timeValue = 60
						this.timeInterval = null
					}
				}, 1000)
			},
			weixinLogin() {
				const that = this
				if (!this.isCh) {
					this.$fun.msg('请先同意用户协议和隐私协议');
					return
				}
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: (event) => {
						const {
							code
						} = event
						// 微信=wechat 小程序 wechatmini
						// #ifdef APP-PLUS || H5
						let params = {
							platform: 'wechat',
							code
						}
						// #endif
						// #ifdef MP-WEIXIN
						let params = {
							platform: 'wechatmini',
							code
						}
						// #endif
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						that.$fun.ajax.post('user/third', params).then(result => {
							if (result.code === 1) {
								const {
									nickname,
									mobile,
									avatar,
									token,
									username
								} = result.data.userinfo
								let ispush = true
								let arr = uni.getStorageSync('userCode') ? JSON.parse(uni
									.getStorageSync('userCode')) : [];
								if (arr.length == 0) {
									arr.push({
										account: mobile,
										avatar: avatar
									})
								}
								for (var i = 0; i < arr.length; i++) {
									if (arr[i].account == mobile) {
										ispush = false
									}
								}
								if (ispush) {
									arr.push({
										account: mobile,
										avatar
									})
								}
								uni.setStorageSync('userCode', JSON.stringify(arr))
								that.isClick = false
								uni.setStorageSync('token', result.data.userinfo.token)
								that.$fun.msg(result.msg)
								mobile ? that.$fun.jump('/pages/index/index', 3, 1200) : uni
									.redirectTo({
										url: '/pageA/setMobile/setMobile'
									})
							} else {
								that.isClick = false
							}
						})
					},
					fail: function(err) {
						// 登录授权失败  
						// err.code是错误码 
						// uni.hideLoading();
					}
				})
			},
			goApp() {
				location.href = this.configObj.download_address
			},
			async toLogin() {
				if (this.isClick) {
					return
				}
				const {
					mobile,
					password
				} = this;
				if (!this.isCh) {
					this.$fun.msg('请先同意用户协议和隐私协议');
					return
				}
				// 手机号为空
				if (!mobile) {
					this.$fun.msg('请输入手机号/用户名');
					return
				}
				// 密码为空
				if (!password) {
					this.$fun.msg('请输入密码');
					return
				}
				this.isClick = true
				const sendData = {
					account: mobile,
					password: password,
				};
				console.log(sendData)
				const result = await this.$fun.ajax.post('user/login', sendData);
				if (result.code === 1) {
					let ispush = true
					let arr = uni.getStorageSync('userCode') ? JSON.parse(uni.getStorageSync('userCode')) : [];
					if (arr.length == 0) {
						arr.push({
							account: mobile,
							password: password,
							avatar: result.data.userinfo.avatar
						})
					}
					for (var i = 0; i < arr.length; i++) {
						if (arr[i].account == mobile) {
							ispush = false
						}
					}
					if (ispush) {
						arr.push({
							account: mobile,
							password: password,
							avatar: result.data.userinfo.avatar
						})
					}
					uni.setStorageSync('userCode', JSON.stringify(arr))
					this.isClick = false
					uni.setStorageSync('token', result.data.userinfo.token)
					this.$fun.msg(result.msg)
					this.$fun.jump('/pages/index/index', 3, 1200)
				} else {
					this.isClick = false
				}
			}
		},

	}
</script>

<style lang='scss'>
	page {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.register_box {
			height: 100%;

			/* position: relative; */
			/* background: url('@/static/login/loginBgc.png') no-repeat center center; */
			/* background-size: 100%; */
			/* padding-top: 600rpx; */
			.register_bg {
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}

			}

			.login_box {
				padding: 0 100rpx;
				position: absolute;
				top: 40%;
				left: 0;
				right: 0;

				.title {
					display: flex;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin: 80rpx 0 40rpx;
					justify-content: space-around;
				}

				.login_input {
					margin: 24rpx auto;
					width: 100%;
					height: 100rpx;
					background: #FFFFFF;
					border-radius: 50rpx;
					display: flex;
					align-items: center;

					input {
						width: 100%;
						height: 100%;
						box-sizing: border-box;
						padding: 10rpx 30rpx;
						border: none;
					}
				}

				.code {
					width: 200rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #3091FF;
				}

				/* 协议 */
				.agreement {
					/* text-align: center; */
					margin-left: 30rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 28rpx;
					display: flex;
					align-items: center;
				}

				.login_button {
					width: 100%;
					height: 100rpx;
					background: #0066FF;
					border-radius: 110rpx 110rpx 110rpx 110rpx;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 100rpx;
					letter-spacing: 5rpx;
					margin: 100rpx 0;
				}
			}
		}

		.register {
			margin: 80rpx auto;
			width: 260rpx;
			height: 56rpx;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 72rpx 72rpx 72rpx 72rpx;
			opacity: 0.5;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 56rpx;
		}
	}
</style>